import React, { Component } from 'react';
import {
    Animated, Easing, Dimensions, StyleSheet, Modal, View, ImageBackground, Pressable, Text, Image, TouchableHighlight
} from 'react-native';
export default class RNPop extends Component {
    //defaultProps 是React 组件的默认属性，当在使用组件时，在没有传递对应的属性的时候默认属性才会生效；
    static defaultProps = {
        isVisible: false,
        content: '',
        btns:null
    }
    constructor(props) {
        super(props);
        this.state = { ...this.props }
    }
    close = () => {
        console.log('关闭')
        this.setState({
            ...this.props
        })

    }
    show = (args) => {
        this.setState({
            ...this.props, ...args, isVisible: true
        })
    }
    render() {
        let opt = this.state
        return (
            <Modal style={{ background: 'red' }}
                visible={this.state.isVisible}
                onRequestClose={this.close}
                transparent={true}
            >
                <View style={styles.centeredView} >

                    <ImageBackground style={{ ...styles.modalView }}
                        source={require('../../../../../assets/imgs/a1/background.png')}
                        imageStyle={{ resizeMode: 'stretch' }}
                    >


                        <Pressable style={{ position: "absolute", right: 7, top: 2, zIndex: 100, }} onPress={() => { this.close() }}><Image
                            style={{ width: 40, height: 40 }}
                            source={require('../../../../../assets/imgs/close.png')}

                        /></Pressable >
                        <Text style={styles.modalText}>{this.state.content}</Text>
                        {/*                             onPress={this.close()},不能这么写报错Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
 */}
                            <View style={{flexDirection:'row',justifyContent:'space-around',width:'100%'}}>
                                {
                                    this.state.btns && this.state.btns.map((item,index)=>{
                                        return (
                                            <TouchableHighlight
                                            key={index}
                                            style={{ ...styles.openButton, backgroundColor: "#2196F3" }}
                                            onPress={() => { item.onPress(), this.close()  }}
                                        >
                                            <Text style={styles.textStyle} >{item.text}</Text>
                                        </TouchableHighlight>
                                        )
                                    })
                                }
                            </View>
                      

                    </ImageBackground>
                </View>

            </Modal>
        )
    }

}
const styles = StyleSheet.create({
    // model样式
    centeredView: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        marginTop: 22,
    },
    modalView: {
        width: 300,
        height: 150,
        margin: 20,
        // backgroundColor: "#3078BB",
        borderRadius: 20,
        padding: 35,
        alignItems: "center",
        shadowColor: "#000",
        shadowOffset: {
            width: 0,
            height: 2
        },
        shadowOpacity: 0.25,
        shadowRadius: 3.84,
        elevation: 5,

    },
    openButton: {
        backgroundColor: "#F194FF",
        borderRadius: 5,
        padding: 2,
        elevation: 2,
        marginTop: 20,
        width: 80,
        fontSize: 8,
    },
    textStyle: {
        color: "white",
        fontWeight: "bold",
        textAlign: "center"
    },
    modalText: {
        marginBottom: 15,
        textAlign: "center",
        color: '#fff'
    }
})
